<template>
  <div>
    <!-- <h2>计算属性</h2> -->
    <!-- 计算属性,是个动态计算出来的属性值,可以像data中的数据一样使用 -->
    <input type="text" v-model.trim.lazy="xing" />
    <span>+</span>
    <input type="text" v-model.trim.lazy="ming" />
    <span>=</span>
    <input type="text" v-model.trim.lazy="fullName" />
    <h2>多次调用计算属性</h2>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "张",
      ming: "三",
    };
  },
  methods: {
    getName() {
      console.log("方法被调用");
      return this.xing + this.ming;
    },
  },
  // 计算属性,要写到 和 data 平级的 computed 中
  computed: {
    //所有的技算属性,都放到这里.
    fullName() {
      return this.xing + " " + this.ming;
    },
  },
};
</script>

<style>
</style>